<template>
	<view>
		<view class="edit">
			<view class="editCard">
				<view class="editTitle">
					收件人
				</view>
				<view class="editMain">
					<input type="text" placeholder="请输入收件人姓名" v-model="name" />
				</view>
			</view>

			<view class="editCard">
				<view class="editTitle">
					电话号码
				</view>
				<view class="editMain">
					<input type="text" placeholder="请输入收件人电话号码" v-model="phoneNumber" />
				</view>
			</view>

			<view class="editCard">
				<view class="editTitle">
					所在地区
				</view>
				<view class="editMain">
					<view class="btns" type="default" @tap="openAddres2">{{province}} {{city}} {{region}}</view>

					<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></simple-address>
				</view>
			</view>

			<view class="editCard">
				<view class="editTitle">
					详细地址
				</view>
				<view class="editMain">
					<input type="text" placeholder="输入详细地址" v-model="detailAddress" />
				</view>
			</view>

			<view class="editCard">
				<view class="editTitle">
					设置默认地址
				</view>
				<view class="editMain defaultAddress">
					<switch :checked="isChecked" @change="switch1Change" />
				</view>
			</view>

		</view>

		<!-- 删除收货地址 -->
		<view class="delAddress" @click="deleteAddress">
			删除收货地址
		</view>


		<!-- 保存地址 -->
		<view class="saveAddress" @click="saveAddress">
			保存地址
		</view>
	</view>
</template>

<script>
	import {
		findAllAddress,
		delAddressInfo,
		updateAddressInfo,
		switchDefault,
		addAddressInfo
	} from "@/api/user/index.js"
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		data() {
			return {
				ids: "",
				list: [],
				cityPickerValueDefault: [0, 0, 1],
				pickerText: "",
				province: "北京市",
				city: "市辖区",
				region: "东城区",
				isChecked: false,
				// 详细地址
				detailAddress: "",
				// 电话
				phoneNumber: "",
				// 姓名
				name: "",
				mumberId: "",
				postCode: "",
				tag: "",
				defaultStatus: 0,
				already:false
			}
		},
		components: {
			simpleAddress
		},
		computed: {

		},
		onLoad(option) {
			
				this.ids = option.id
				console.log(this.ids)
				console.log(this.ids)
				if(this.ids==undefined){
					
				}else{
					findAllAddress().then(res => {
						res.data.items.forEach(res=>{
							if(res.defaultStatus==0){
								res.isCheck=false
							}else{
								res.isCheck=true
							}
						})
						var arr = res.data.items.filter(res => res.id == this.ids)
						this.already=true
						this.list = arr[0]
						console.log("list", this.list)
						this.province = this.list.province
						this.city = this.list.city
						this.region = this.list.region
						this.detailAddress = this.list.detailAddress
						this.phoneNumber = this.list.phoneNumber
						this.name = this.list.name
						this.mumberId = this.list.mumberId
						this.postCode = this.list.postCode
						this.tag = this.list.tag
						this.isChecked=this.list.isCheck
				})
				}

				


		},
		methods: {
			openAddres2() {
				// 根据 label 获取
				var index = this.$refs.simpleAddress.queryIndex([this.province, this.city, this.region], 'label');
				console.log(index);
				this.cityPickerValueDefault = index.index;
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e);
				this.pickerText = JSON.parse(this.pickerText)
				console.log(this.pickerText)
				this.province = this.pickerText.labelArr[0]
				this.city = this.pickerText.labelArr[1]
				this.region = this.pickerText.labelArr[2]

			},
			switch1Change() {

			},
			//删除地址
			deleteAddress() {
				delAddressInfo(this.ids).then(res => {
					console.log(res)

				})
			},
			// 保存地址
			saveAddress() {
				if (this.isChecked = false) {
					this.defaultStatus = 0
				} else {
					this.defaultStatus = 1
				}
				if(this.already==true){
					updateAddressInfo({
						city: this.city,
						cityCode: this.pickerText.cityCode,
						defaultStatus: this.defaultStatus,
						detailAddress: this.detailAddress,
						id: this.ids,
						mumberId: this.mumberId,
						name: this.name,
						phoneNumber: this.phoneNumber,
						postCode: this.postCode,
						province: this.province,
						region: this.region,
						tag: this.tag
					}).then(res => {
						console.log(res)
					})
					//切换默认地址
					switchDefault(this.ids,this.defaultStatus).then(res=>{
						console.log(res)
					})
				}else{
					addAddressInfo({
						  city: this.city,
						  cityCode: this.pickerText.cityCode,
						  defaultStatus: this.defaultStatus,
						  detailAddress: this.detailAddress,
						  name: this.name,
						  phoneNumber: this.phoneNumber,
						  province: this.province,
						  region: this.region,
						  tag: this.tag
					}).then(res=>{
						console.log(res)
						console.log("是否存在",this.already)
					})
				}
				
			}

		}
	}
</script>


<style lang="scss">
	page {
		background-color: #F1ECE7;
	}
</style>
<style lang="scss" scoped>
	.edit {
		.editCard {
			width: 94%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			border-bottom: 1Px solid #ccc;

			.editTitle {
				display: flex;
				width: 30%;
				height: 60px;
				font-weight: 200;
				font-size: 15px;
				align-items: center;
			}

			.editMain {
				width: 70%;
				.btns{
					font-size: 16px;
					background-color: #F1ECE7;
				}
				&.defaultAddress {
					display: flex;
					justify-content: flex-end;
				}
			}
		}
	}

	//删除地址
	.delAddress {
		width: 94%;
		margin: 0 auto;
		height: 50px;
		background-color: #e64340;
		font-size: 18px;
		text-align: center;
		line-height: 50px;
		color: #FFFFFF;
		margin-top: 30px;
	}

	.saveAddress {
		position: fixed;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
		width: 70%;
		height: 40px;
		border-radius: 40px;
		background-color: #354e44;
		color: #fff;
		margin: 0 auto;
		text-align: center;
		line-height: 40px;
	}
</style>
